<template>
  <div class="campus-bus-container">
    <div class="main-content">
      <div>
        <img
          src="@/assets/CampusBus/top.png"
          alt="top"
          class="top-image"
          style="position: fixed; top: 0; left: 0; width: 100%; z-index: -1"
        />
        <div style="position: relative; z-index: 2">
          <RouterView />
          <NavComponent />
        </div>
      </div>
    </div>
  </div>
  <!-- 顶部固定背景图 -->
</template>

<script setup>
import NavComponent from "./nav/index.vue";
</script>

<style scoped>
.campus-bus-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保容器至少和视口一样高 */
  position: relative;
  background-color: #f5f5f5;
  z-index: 1;
}

.main-content {
  flex-grow: 1; /* 让主要内容区域占据可用空间 */
  padding-bottom: 70px; /* 留出底部导航栏的高度 */
}
</style>
